﻿<!DOCTYPE html>
<html>
<head>
    <title>Game screens sample</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #fff;
        }

    </style>


    <script src="../../js/phaser.js"></script>
    <script src="../../dist/EZGUI.js"></script>
	<script src="./app-gui.js"></script>
</head>
<body>
    <script>
        var gameWidth = 400;
        var gameHeight = 640;

		var game = new Phaser.Game(gameWidth, gameHeight, Phaser.AUTO, '', { preload: preload, create: create });

		function preload() {
            //... your preload
		}

		function create() {
            //... your create
		}



		var mainScreen;
		var secondScreen;
		var thirdScreen;
		EZGUI.Theme.load(['../../assets/metalworks-theme/metalworks-theme.json'], function () {

		    mainScreen = EZGUI.create(mainScreenJSON, 'metalworks');

		    secondScreen = EZGUI.create(secondScreenJSON, 'metalworks');
		    secondScreen.visible = false;

		    thirdScreen = EZGUI.create(thirdScreenJSON, 'metalworks');
		    thirdScreen.visible = false;



			
			
			setupGUI();
		});


		function setupGUI() {
		    EZGUI.components.btNext1.on('click', function () {

		        secondScreen.position.x = gameWidth;
		        secondScreen.visible = true;

		        mainScreen.animatePosTo(-gameWidth, mainScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            mainScreen.visible = false;
		        });

		        secondScreen.animatePosTo(0, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		        });

		    });
		    EZGUI.components.btPrev2.on('click', function () {

		        mainScreen.position.x = -gameWidth;
		        mainScreen.visible = true;

		        secondScreen.animatePosTo(gameWidth, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            secondScreen.visible = false;
		        });


		        mainScreen.animatePosTo(0, mainScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {

		        });

		    });

		    EZGUI.components.btNext2.on('click', function () {

		        thirdScreen.position.x = gameWidth;
		        thirdScreen.visible = true;

		        secondScreen.animatePosTo(-gameWidth, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            secondScreen.visible = false;
		        });

		        thirdScreen.animatePosTo(0, thirdScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            //dlg1.visible = false;
		        });

		    });


		    EZGUI.components.btPrev3.on('click', function () {

		        secondScreen.position.x = -gameWidth;
		        secondScreen.visible = true;

		        thirdScreen.animatePosTo(gameWidth, thirdScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		            thirdScreen.visible = false;
		        });


		        secondScreen.animatePosTo(0, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {
		        });

		    });

		}




        
		

        
    </script>
    <script src="../../js/ga.js"></script>
</body>
</html>
